<template>
  <view class="content">
    <view class="category">
      <view
        v-for="item in category"
        :key="item.value"
        class="category-item"
        :class="params.genre === item.value ? 'category-item-active' : ''"
        @tap="changeCategory(item.value)"
      >
        <view class="category-title">{{ item.text }}</view>
      </view>
    </view>
    <scroll-view style="height: 100vh" scroll-y @scrolltolower="loadMore">
      <view class="search">
        <uni-easyinput v-model="params.tittle" placeholder="请输入搜索内容">
          <template #right>
            <button class="search-btn" @tap="refreshData">
              <uni-icons type="search" color="#fff" size="16"></uni-icons>
              搜索
            </button>
          </template>
        </uni-easyinput>
      </view>
      <VoteCard v-model="voteList" />
      <view class="loading-text">
        {{ voteList.length >= total ? "没有更多数据~" : "正在加载..." }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import VoteCard from "./components/voteCard.vue";
import { getVoteListAPI } from "@/api/vote";
import { onLoad } from "@dcloudio/uni-app";
import {
  voteListParamsType,
  PublishState,
  voteListResponseType,
} from "@/types/vote";

// 页面加载
onLoad(async () => {
  isLoading.value = true;
  await getVoteList();
  isLoading.value = false;
});

const isLoading = ref(false);
const total = ref(0);
const params: voteListParamsType = reactive({
  page: 1,
  size: 10,
  state: PublishState.approved,
  genre: "",
  tittle: "",
});

const voteList = ref<voteListResponseType[]>([]);
const category = ref([
  { text: "推荐", value: "" },
  { text: "生活", value: "life" },
  { text: "教育", value: "education" },
  { text: "科技", value: "tech" },
  { text: "互联网", value: "internet" },
]);

const changeCategory = async (value: string) => {
  params.genre = value;
  params.page = 1;
  voteList.value = [];
  await getVoteList();
};

const refreshData = async () => {
  params.page = 1;
  voteList.value = [];
  await getVoteList();
};

// 获取投票活动列表
const getVoteList = async () => {
  const res = await getVoteListAPI(params);
  total.value = res.data.total;
  voteList.value.push(...res.data.records); // 使用 push 添加新数据
};

// 加载更多数据
const loadMore = async () => {
  if (voteList.value.length >= total.value) return; // 已经加载完毕
  if (isLoading.value) return; // 防止重复加载
  isLoading.value = true;
  params.page += 1; // 更新页码
  await getVoteList(); // 重新获取数据
  isLoading.value = false;
};
</script>

<style lang="scss">
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .category {
    display: flex;
    padding: 4rpx 36rpx;
    .category-item {
      padding: 12rpx 36rpx;
      font-size: 28rpx;
      position: relative;
    }
    .category-item-active {
      color: #333;
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        margin-left: calc(50% - 22rpx);
        width: 44rpx;
        height: 6rpx;
        background-color: #00fffb;
        border-radius: 4rpx;
      }
    }
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

.search {
  padding: 20rpx 20rpx 0;
  background-color: #ebebeb;
}

.search-btn {
  line-height: 72rpx;
  background-color: #2979ff;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
}
</style>
